import React, { useState } from 'react'
import TopNav from '../../../components/TopNav/TopNav'
import { Revoke } from '@react-vant/icons';
import { useLocation, useNavigate } from 'react-router';
import { Card, Popup, Button, Input, Cell, Toast } from 'react-vant';
import { Edit, ShareO, Cross } from '@react-vant/icons';
import './Index.css'


const Index = () => {
    const navigate = useNavigate()
    const location = useLocation()
    const [visible, setVisible] = useState(false)
    const [EditContent, setEditContent] = useState(false)
    const itemId = location.state?.item
    console.log(itemId);

    return (
        <div>
            <TopNav />
            <div className='Back' onClick={() => {
                navigate('/website')
            }}>
                <Revoke style={{ fontSize: '15px' }} />
                <span>返回网站项目</span>
            </div>
            <div className='Technology'>
                <p>{itemId.title}</p>
                <Card style={{ marginTop: '20px' }} round>
                    <Card.Header>技术任务</Card.Header>
                    <Card.Body>
                        上次修改时间：{itemId.ModifyTime}
                    </Card.Body>
                </Card>
                <div className='detail'>
                    <p>任务详情</p>
                    <div className='EditShare'>
                        <Edit
                            onClick={() => {
                                setEditContent(true)
                            }}
                        />
                        <Popup visible={EditContent} closeable={true} onClose={() => setEditContent(false)} className='PopupEdit'>
                            <Cell onClick={() => { setEditContent(false) }} />
                            <div className='EditContent'>
                                <p>网站设计要求</p>
                                <Input.TextArea value={itemId.RequireDesc} />
                            </div>
                        </Popup>
                        <ShareO onClick={() => {
                            setVisible(true)
                        }} />
                        <Popup
                            className='PopupShare'
                            visible={visible}
                            closeable={true}
                            onClose={() => setVisible(false)}
                            round
                            title={'分享文件夹'}>
                            <Card className='PopupCard'>
                                <div className='PopupSelect'>
                                    <p>选择成员</p><br />
                                    <select className='PopupSelectItem'>
                                        <option>youliao@gmail.com</option>
                                        <option>zhangsan@gmail.com</option>
                                        <option>wangwu@gmail.com</option>
                                    </select>
                                    <p className='PopupSelectP'>+ 添加另一个成员</p>
                                    <Button
                                        type='primary'
                                        color='#598dff'
                                        className='PopupBtn'
                                        round
                                        onClick={() => {
                                            setVisible(false)
                                            console.log(visible);
                                            Toast.info('分享成功')
                                        }}
                                    >分享</Button>
                                </div>
                            </Card>
                        </Popup>
                    </div>
                </div>
                <Card className='CartDesc' round>
                    <div className='CartDescItem'>
                        <p>网站设计要求</p><br />
                        <p>{itemId.RequireDesc}</p>
                    </div>
                    <div className='CartDescItem'>
                        <p>网站设计不应包括：</p>
                        <span>{itemId.IncludeDesc}</span><br />
                        <span>{itemId.IncludeDescs}</span>
                    </div>
                    <div className='CartDescItem'>
                        <p>现场展示要求</p>
                        <p>{itemId.DisplayDesc}</p>
                    </div>
                    <div className='CartDescItem'>
                        <img src='../Website/WebsiteDetail/image1.png' style={{ width: '100%' }} />
                        <img src='../Website/WebsiteDetail/image.png' style={{ width: '100%', marginTop: '10px' }} />
                    </div>
                    <div className='CartDescItem'>
                        <p>访问共享要求</p>
                        <p>{itemId.share}</p>
                    </div>
                    <Button color='#598dff' round className='Btn'>+</Button>
                </Card>
            </div>
        </div>
    )
}

export default Index